<template>
  <div class="page-contact-search">
    <Navbar title="领导驾驶舱" />
    <div class="search-bar">
      <div class="input-wrapper">
        <img src="@/views/video-zone/assets/search.png" class="icon-search" />
        <input v-model="searchText" placeholder="请输入" type="text" @keyup.enter="handleSearch" />
        <img src="@/views/video-zone/assets/clear.png" class="icon-clear" @click="searchText = ''" />
      </div>
      <div @click="back" class="cancel">取消</div>
    </div>

    <div class="result-list">
      <WorkItem
        v-for="item in resultList"
        :key="item.id"
        :item="item"
        @view="handleView"
        @fav="handleFavChange"
      />

      <van-empty v-if="!resultList || !resultList.length" description="没有重点工作信息" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Navbar from '@/components/Navbar/index.vue'
import WorkItem from './workItem.vue'
import keyWorkServe from '@/api/keyWork.ts'

const resultList = ref<TypeVidItem[]>([])
const searchText = ref<string>('')

const showPreview = ref(false)
const previewData = ref<TypeVidItem>(null)

const handleView = (item: TypeVidItem) => {
  previewData.value = item
  showPreview.value = true
}
const handleFavChange = (item: TypeVidItem) => {
  item.isFocus = item.isFocus == 0 ? 1 : 0
}
const handleSearch = () => {
  console.log('search', searchText.value)
  if (searchText.value) {
    keyWorkServe.focusWorkList({
      content: searchText.value,
    }).then(res=>{
      const { data } = res
      resultList.value = data
    })
  }
}

const router = useRouter()
const back = () => {
  router.back()
}
</script>

<style lang="less" scoped>
.page-contact-search {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .search-bar {
    display: flex;
    padding: 0px 12px 12px 12px;
    background-color: #3a75c5;
    align-items: center;

    .cancel {
      color: #fff;
      font-size: 14px;
      padding-left: 12px;
      flex-shrink: 0;
      min-width: 30px;
    }
    .input-wrapper {
      flex-grow: 1;
      height: 32px;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-radius: 999px;
      padding: 0px 12px;

      .icon-search {
        width: 14px;
        height: 14px;
      }

      .icon-clear {
        width: 16px;
        height: 16px;
      }

      input {
        flex-grow: 1;
        height: 19px;
        border: none;
        outline: none;
        color: #000000;
        font-size: 13px;
        padding: 0px 12px;
      }
    }
  }

  .result-list {
    padding: 12px;
    flex-grow: 1;
    overflow-y: scroll;
  }
}
</style>
